<template>
  <header class="top-header">
    <!-- LOGO -->
    <div class="logo" @click="router.push({ name: 'JOBSQUARE' })">
      <n-icon :size="40">
        <svg-icon name="Logo"></svg-icon>
      </n-icon>
      <n-gradient-text :size="24" type="success"> AIIT JOB </n-gradient-text>
    </div>

    <n-dropdown
      :options="options"
      @select="handleSelect"
      placement="bottom-end"
      v-if="userInfo"
    >
      <div class="avatar">
        <!-- <img :src="userInfo.avatar" /> -->
        <n-avatar size="large" :src="userInfo.avatar" />
        <n-gradient-text :size="16" type="success">
          {{ userInfo.name }}
        </n-gradient-text>
      </div>
    </n-dropdown>
    <n-button strong round type="success" @click="openLoginModal" v-else>
      登 录
    </n-button>
  </header>
  <n-modal v-model:show="loginModal">
    <n-card
      style="width: 800px"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <Login></Login>
    </n-card>
  </n-modal>

  <n-modal v-model:show="personalModal">
    <n-card
      style="width: 1000px"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <Personal></Personal>
    </n-card>
  </n-modal>
</template>

<script setup>
import { useRouter } from "vue-router"
import { ref, computed } from "vue"
import { useStore } from "vuex"
import Login from "@/views/login/Index.vue"
import Personal from "@/views/personal/Index.vue"
const router = useRouter()
const store = useStore()

const userInfo = computed(() => {
  return store.state.user.info
})

const loginModal = computed(() => {
  return store.state.user.loginModal
})

const personalModal = computed(() => {
  return store.state.user.personalModal
})

const options = [
  {
    label: "个人资料",
    key: "personal",
  },
  {
    label: "退出登录",
    key: "logout",
  },
]
// 定义方法
function handleSelect(key) {
  if (key === "logout") {
    logout()
  }
  if (key === "personal") {
    openPersonalModal()
  }
}

function logout() {
  // userStore.logout()
  window.$message.success("已退出登录")
  sessionStorage.removeItem("token")
  sessionStorage.removeItem("info")
  store.commit("user/SET_INFO", "")
  router.replace({ path: "/job-square" })
}

function openPersonalModal() {
  store.commit("user/SET_PERSONALMODAL", true)
}

function openLoginModal() {
  store.commit("user/SET_LOGINMODAL", true)
}
</script>
<style lang="scss" scoped>
.top-header {
  width: 100%;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;

  .logo {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .avatar {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    margin-right: 50px;
    gap: 15px;
  }
}
</style>